<template>
	<el-dialog :title="dialog.title" :visible.sync="dialogVisible" @close="onClose" width="55%">
		<el-row :gutter="15">
			<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
				<el-col :span="24">
					<el-form-item label="所属上级" prop="parent">
						<el-cascader v-model="formData.parent" :options="parentOptions" :props="parentProps"
							:style="{width: '100%'}" placeholder="请选择所属上级" clearable></el-cascader>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="菜单类型" prop="types">
						<el-radio-group v-model="formData.types" size="medium">
							<el-radio v-for="(item, index) in typesOptions" :key="index" :label="item.value"
								:disabled="item.disabled" @change="typesChange">{{item.label}}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="状态" prop="status">
						<el-radio-group v-model="formData.status" size="medium">
							<el-radio v-for="(item, index) in statusOptions" :key="index" :label="item.value"
								:disabled="item.disabled">{{item.label}}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="24" v-show="formData.types==1">
					<el-form-item label="菜单图标" prop="icon" :required="formData.types==1">
						<e-icon-picker v-model="formData.icon" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="菜单名称" prop="name">
						<el-input v-model="formData.name" placeholder="请输入菜单名称" :maxlength="30" show-word-limit
							clearable :style="{width: '100%'}"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="权限标识" prop="code">
						<el-input v-model="formData.code" placeholder="请输入权限标识" :maxlength="30" show-word-limit
							clearable :style="{width: '100%'}"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24" v-show="formData.types==2">
					<el-form-item label="路由地址" prop="urls" :required="formData.types==2">
						<el-input v-model="formData.urls" placeholder="请输入路由地址" :maxlength="100" show-word-limit
							clearable suffix-icon="el-icon-link" :style="{width: '100%'}"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="排序" prop="sort" required>
						<el-slider :max="100" :step="1" v-model="formData.sort"></el-slider>
					</el-form-item>
				</el-col>
				<el-col :span="24" v-show="formData.types==2">
					<el-form-item label="按钮权限" prop="btnFun" :required="formData.types==2">
						<el-checkbox-group v-model="formData.btnFun" size="medium">
							<el-checkbox v-for="(item, index) in btnFunOptions" :key="index" :label="item.value"
								:disabled="item.disabled">{{item.label}}</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
				</el-col>
			</el-form>
		</el-row>
		<span slot="footer" class="dialog-footer">
			<el-button @click="close">取 消</el-button>
			<el-button type="primary" @click="handelConfirm" :loading="btnLoading">确 定</el-button>
		</span>
	</el-dialog>
</template>
<script>
	import _ from 'lodash'
	export default {
		data() {
			let validateBtnFun = (rule, value, callback) => {
				if (this.formData.btnFun.length == 0 && this.formData.types == 2) {
					callback(new Error("请选择按钮权限"));
				} else {
					callback();
				}
			}
			let validateUrls = (rule, value, callback) => {
				if (!this.formData.urls && this.formData.types == 2) {
					callback(new Error("请输入路由地址"));
				} else {
					callback();
				}
			}
			let validateIcon = (rule, value, callback) => {
				if (!this.formData.icon && this.formData.types == 1) {
					callback(new Error("请选择目录图标"));
				} else {
					callback();
				}
			}
			return {
				dialog: {
					title: '添加菜单'
				},
				formData: {
					id: undefined,
					parent: [],
					types: 1,
					status: true,
					icon: undefined,
					name: undefined,
					code: undefined,
					urls: undefined,
					sort: 1,
					btnFun: []
				},
				isVisbtnFun: true,
				rules: {
					parent: [],
					types: [
						{
							required: true,
							message: '菜单类型不能为空',
							trigger: 'change'
						}
					],
					status: [
						{
							required: true,
							message: '状态不能为空',
							trigger: 'change'
						}
					],
					icon: [{ validator: validateIcon }],
					name: [
						{
							required: true,
							message: '请输入菜单名称',
							trigger: 'blur'
						}
					],
					code: [
						{
							required: true,
							message: '请输入权限标识',
							trigger: 'blur'
						}
					],
					urls: [{ validator: validateUrls }],
					btnFun: [{ validator: validateBtnFun }]
				},
				parentOptions: [],
				typesOptions: [
					{
						label: '目录',
						value: 1
					},
					{
						label: '菜单',
						value: 2
					}
				],
				statusOptions: [
					{
						label: '显示',
						value: true
					},
					{
						label: '隐藏',
						value: false
					}
				],
				iconOptions: [],
				btnFunOptions: [],
				parentProps: {
					multiple: false,
					checkStrictly: true,
					expandTrigger: 'hover'
				},
				dialogVisible: false,
				btnLoading: false,
				btnData: []
			}
		},
		methods: {
			onClose() {
				this.formData = {
					id: undefined,
					parent: [],
					types: 1,
					status: true,
					icon: undefined,
					name: undefined,
					code: undefined,
					urls: undefined,
					sort: 1,
					btnFun: []
				}
				this.btnFunOptions = []
				this.$refs['elForm'].resetFields()
			},
			close() {
				this.btnFunOptions = []
				this.dialogVisible = false
				this.$emit('update:visible', false)
			},
			typesChange(m) {
				this.rules.btnFun.required = m == 1;
			},
			/*
			查询父级练级信息
			*/
			refreshSelect() {
				var _this = this
				this.$api.sys.menu
					.getSelect()
					.then(({ statusCode, data, message }) => {
						if (statusCode == 200) {
							this.parentOptions = data
						} else {
							this.$notify({
								message: message,
								type: 'error'
							})
						}
					})
					.catch(() => {
						this.loading = false
					})
			},
			/*
			查询按钮列表
			*/
			refreshBtnFun() {
				var _this = this
				this.$api.sys.code
					.list({ limit: 100, id: '1258647245457330176' })
					.then(({ statusCode, data, message }) => {
						if (statusCode == 200) {
							this.btnData = data.items;
							data.items.forEach(item => {
								_this.btnFunOptions.push({
									label: item.name,
									value: item.id
								})
							})
						} else {
							this.$notify({
								message: message,
								type: 'error'
							})
						}
					})
			},
			handleAdd() {
				this.refreshSelect()
				this.refreshBtnFun()
				this.formData.id = '0'
				this.dialog.title = '添加菜单'
				this.dialogVisible = true
			},
			handelModify(record) {
				record.parent = []
				if (record.parentGroupId) {
					var str = record.parentGroupId.split(',')
					str.forEach(function (item, i) {
						if (item != record.id) {
							record.parent.push(item)
						}
					})
					this.refreshSelect()
				}
				this.refreshBtnFun()
				let arr = []
				if (record.btnFun.length > 0) {
					record.btnFun.forEach(item => {
						if (item.id) {
							arr.push(item.id)
						}
						else {
							arr.push(item)
						}
					})
					record.btnFun = arr
				}

				// if (typeof (record.btnFun) == 'string') {
				// 	var btnFunArr = record.btnFun.split(',')
				// 	record.btnFun = [];
				// 	btnFunArr.forEach(function (item, i) {
				// 		record.btnFun.push(item)
				// 	})
				// }

				this.dialog.title = '编辑菜单'
				this.dialogVisible = true
				this.$nextTick(() => {
					this.formData = _.cloneDeep(record)
				})
			},
			/*
			重新绑定btnFun 丰富数组内内容
			*/
			resetBtnFun() {
				let arr = [], _this = this;
				this.btnData.forEach(item => {
					_this.formData.btnFun.forEach(row => {
						if (item.id == row) {
							arr.push({
								id: item.id,
								name: item.name,
								value: item.codeValues
							})
						}
					})
				})
				return arr
			},
			handelConfirm() {
				this.$refs['elForm'].validate(valid => {
					if (!valid) return
					this.formData.btnFun = this.resetBtnFun();
					if (this.formData.id == '0') {
						this.formData.id = ''
						this.$api.sys.menu
							.submit(this.formData)
							.then(({ statusCode, data, message }) => {
								if (statusCode == 200) {
									this.close()
									this.$emit('complete')
									this.$notify({
										message: '添加成功',
										type: 'success'
									})
								} else {
									this.$notify({
										message: message,
										type: 'error'
									})
								}
							})
							.catch(() => {
								this.loading = false
							})
					} else {
						console.log(this.formData)
						this.$api.sys.menu
							.modify(this.formData)
							.then(({ statusCode, data, message }) => {
								if (statusCode == 200) {
									this.close()
									this.$emit('complete')
									this.$notify({
										message: '修改成功',
										type: 'success'
									})
								} else {
									this.$notify({
										message: message,
										type: 'error'
									})
								}
							})
							.catch(() => {
								this.loading = false
							})
					}
				})
			}
		}
	}
</script>